<template>
    <div class="sys-page">
        <div class="sys-search">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-tree :data="deptTreeData" :props="defaultProps" highlight-current
                             @node-click="handleNodeClick"></el-tree>
                </el-col>
                <el-col :span="18">
                    <el-form :model="dept" :label-position="$store.labelPosition"
                             label-width="30%" ref="dept" :rules="rules">
                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="上级部门：" prop="parentId" >
                                    <el-select v-model="dept.parentId" filterable  clearable
                                               placeholder="请选择上级部门">
                                        <el-option v-for="parentDept in allDepts" :key="parentDept.id"
                                                   :label="parentDept.deptName" :value="parentDept.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                        </el-row>

                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="部门名称：" prop="deptName">
                                    <el-input type="text" placeholder="部门名称" v-model="dept.deptName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="排序：" prop="orderNum">
                                    <el-input-number v-model="dept.orderNum"></el-input-number>
                                </el-form-item>
                            </el-col>

                        </el-row>

                        <el-row>
                        <el-col :span="20">
                            <el-form-item label="工时类别：" prop="effortType">
                                <el-select v-model="dept.effortType" clearable placeholder="请选择工时类别" >
                                    <el-option v-for="et in effortTypes" :key="et.code"
                                               :label="et.description" :value="et.code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="20">
                                <el-form-item label="权重：" prop="effortWeight">
                                    <el-select v-model="dept.effortWeight" clearable placeholder="请选择权重" >
                                        <el-option v-for="et in effortWeights" :key="et.code"
                                                   :label="et.description" :value="et.code"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row >
                            <el-col :span="20" :offset="6">
                                <el-button type="edit" icon="fa fa-save" @click="submitForm()">
                                    保存
                                </el-button>

                                <el-button type="edit" icon="el-icon-plus" v-if="isEditDept"
                                           @click="showAddSubDept()">添加下级</el-button>
                                <el-button type="danger" icon="el-icon-delete" v-if="isEditDept"
                                           @click="deleteDept()" >删除部门</el-button>
                                <el-button type="edit" icon="el-icon-plus" v-if="isEditDept"
                                           @click="gotoAddDept()" >创建新部门</el-button>

                            </el-col>
                        </el-row>
                    </el-form>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: "dept",

    data() {
        return {
            dept:{
                id: -1,
                parentId: "",
                deptName: "",
                orderNum: 1,
                effortType: "",
                effortWeight: ""
            },
            depts:[],
            defaultProps: {
                children: 'child',
                label: 'name'
            },

            isEditDept: false,

            rules:{
                parentId:[{ required: true, message: '请输入上级部门', trigger: 'blur' }],
                deptName:[{ required: true, message: '请输入部门名称', trigger: 'blur' }],
                orderNum:[{ required: true, message: '请输入排序', trigger: ['blur'] }],
            }
        }
    },

    mounted() {
        this.fetchDeptTreeData();
        this.fetchDropdownValues();
    },

    methods: {
        ...mapActions({
            fetchDeptTreeData: 'dept/fetchDeptTreeData',
            fetchDropdownValues: 'dept/fetchDropdownValues'
        }),

        async handleNodeClick(data) {
            let selectDeptId = data.id;
            let res = await this.$axios.get(`/hr/dept/${selectDeptId}`);
            this.dept = res.result;
            this.isEditDept = true;
            if(this.dept.parentId == 0){
                this.dept.parentId = "";
            }
        },

        submitForm(){
            this.$refs['dept'].validate((valid) => {
                if(valid){
                    this.saveDept();
                }
            });
        },

        async saveDept(){
            if(this.isEditDept){
                await this.$axios.put('/hr/dept', this.dept);
                this.$myMsg.success('成功修改部门信息。');
                this.gotoAddDept(); // 还原初始值
            }else{
                await this.$axios.post('/hr/dept', this.dept);
                this.$myMsg.success('成功创建报价信息。请增加产品信息。');
            }
            this.reloadPageDate();
        },

        reloadPageDate(){
            this.fetchDeptTreeData();
            this.fetchDropdownValues();
        },

        gotoAddDept(){
            this.dept.id = "";
            this.dept.parentId = "";
            this.dept.deptName = "";
            this.dept.orderNum = 1;
            this.dept.effortType = "";
            this.dept.effortWeight = "";
            this.isEditDept = false;
        },

        showAddSubDept(){
            this.dept.parentId = this.dept.id;
            this.dept.id = "";
            this.dept.deptName = "";
            this.dept.orderNum = 1;
            this.dept.effortType = "";
            this.dept.effortWeight = "";
            this.isEditDept = false;
        },

        async deleteDept(){
            await this.$axios.delete(`/hr/dept/${this.dept.id}`);
            this.reloadPageDate();
            this.gotoAddDept();
        }

    },

    computed: {
        ...mapState({
            effortTypes: state => state.dept.effortTypes,
            effortWeights: state => state.dept.effortWeights,
            deptTreeData: state => state.dept.deptTreeData,
            defaultProps: state => state.dept.defaultProps,
            allDepts: state => state.dept.allDepts
        })
    }

}
</script>

